<template>
    <view class="picture-book-card">
        <view class="book-item" @tap="watchBook(item)" v-for="(item, index) in bookList" :key="index">
            <view style="width: 90rpx; height: 90rpx; border-radius: 50%; overflow: hidden; margin-bottom: 10rpx;">
                <image
                :src="item.booksHead"/>
            </view>
            <text class="ellipsis">{{sortName}}</text>
        </view>
    </view>
</template>

<script>
    import { getBooks } from '@/util/commonFn'
    export default {
        name: "multi-book",
        props: {
            idName: {
                type: String,
                default: ''
            },
            sortName: {
                type: String,
                default: ''
            },
            idVal: {
                type: String,
                default: ''
            }
        },
        data(){
            return {
                limit: 1,
                page: 1,
                bookList: []
            }
        },
        watch: {
            idVal(newVal){
                this.getBooksHandle({
                    limit: 1,
                    page: 1,
                    [this.idName+'Id']: newVal
                })
            }
        },
        mounted(){
            this.getBooksHandle({
                limit: 1,
                page: 1,
                [this.idName+'Id']: this.idVal
            })
        },
        methods: {
            watchBook(){
                // uni.navigateTo({
                //     url: `../components/gw-book-detail?booksId=${item.booksId}`
                // })
                uni.navigateTo({
                    url: `./class-search-list?idName=sort&id=${this.idVal}&sortType=${this.idVal}`
                })
            },
            getBooksHandle(params){
                let that = this;
                getBooks(params).then(data=>{
                    that.bookList = data.data || [];
                    if(!that.bookList.length){
                        that.bookList = [{booksHead: 'https://img.thumbrary.com/imgUrl_1584770197455236.png'}]
                    }
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .picture-book-card{
       .book-item{
           width: 165rpx;
           height: 200rpx;
           background:rgba(255,255,255,1);
           box-shadow:0rpx 3rpx 10rpx rgba(0,0,0,0.06);
           border-radius:10rpx;
           padding: 16rpx;
           box-sizing: border-box;
           display: flex;
           flex-direction: column;
           align-items: center;
           margin-right: 7rpx;
           image{
               width: 400rpx;
               height: 300rpx;
               margin-left: -155rpx;
               margin-top: -105rpx;
               /*border-radius: 50%;*/
               /*margin-bottom: 10rpx;*/
           }
           .ellipsis{
               height: 66rpx;
               -webkit-line-clamp: 2;
               font-size: 24rpx;
               text-align: center;
           }
       }
    }
</style>
